<html>
    <head>
        <title>后备内容</title>
    </head>
    <body>
        <script>
            // 后备内容
                  /*
                        有时，为一个插槽设置具体的后备内容(也就是默认内容)是很有用的，它只会在没有提供内容的时候被渲染。
                  */
                        // 例如在一个 <submit-button>组件的模板中：
                                /*
                                    <button type="submit">
                                        <slot></slot>
                                    </button>
                                */

                        /*
                            我们可能希望这个<button> 内绝大多数情况下都渲染文本 "Submit"。
                            为了将"Submit"作为后备内容，我们可以将它放在 <slot>标签内：        
                        */ 
                                /*
                                    <button type="submit">
                                        <slot>Submit</slot>  // 直接放在 <slot>标签内，就是默认内容了。
                                    </button>
                                */

                        // 现在,当我们在一个父级组件中使用<submit-button> 并且不提供任何插槽内容时：
                                /*
                                    <submit-button></submit-button>
                                */

                        // 后备内容(默认内容)将会被渲染：
                                /*
                                    <button type="submit">
                                        Submit
                                    </button>
                                */
                        // 但是，如果我们提供了内容：
                                /*
                                    <submit-button>
                                        Save
                                    </submit-button>
                                */
                        // 则这个提供的内容将会被渲染从而取代后备内容
                                /*
                                    <button type="submit">
                                        Save
                                    </button>
                                */
                       
        </script>
    </body>
</html>